<template>
    <div>自定义组件v-model

        <div>
            {{ msg }}
        </div>

        <div>

        {{ ruleForm }}
            <UploadFile v-model="ruleForm.photo"></UploadFile>

            <VModelChild v-model="msg"></VModelChild>

            <button @click="submit">提交</button>
        </div>

        <VModelChild2 v-model:title="msg" v-model="ruleForm.name"></VModelChild2>

        <CascaderBuilding v-model="ruleForm.buidingid"></CascaderBuilding>
        <CascaderBuilding v-model="ruleForm.buidingid2" type="single"></CascaderBuilding>
        <CascaderBuilding v-model="ruleForm.buidingid3" type="multiple"></CascaderBuilding>
    </div>
</template>
<script setup lang='ts'>

//父组件
import { ref, reactive } from 'vue';
import VModelChild from './VModelChild.vue';
import UploadFile from '@/components/upload/UploadFile.vue'
import VModelChild2 from './VModelChild2.vue';
import CascaderBuilding from '@/components/building/CascaderBuilding.vue';
import { buffer } from 'stream/consumers';

const msg = ref("hello world");

const ruleForm = reactive({
    id: 0,
    age:20,
    photo: "2025/10/22/202510220939422449421.png",
    name: "张三",

     buidingid: 21185,
     buidingid2: 21200,
     buidingid3: [20633, 20635, 20634],




})

const submit = () => {
    console.log(ruleForm);
}

</script>
<style scoped lang='less'></style>